
<!DOCTYPE html>

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>Complex Layout - jQuery EasyUI Demo</title>

		<link rel="stylesheet" type="text/css"
			href="../themes/default/easyui.css">

		<link rel="stylesheet" type="text/css" href="../themes/icon.css">

		<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>

		<script type="text/javascript" src="../jquery.easyui.min.js"></script>

		<script>

		$(function(){

			$('#tt2').datagrid({

				title:'My Title',

				iconCls:'icon-save',

				width:600,

				height:350,

				nowrap: false,

				striped: true,

				fit: true,

				url:'datagrid_data.json',

				sortName: 'code',

				sortOrder: 'desc',

				idField:'code',

				frozenColumns:[[

	                {field:'ck',checkbox:true},

	                {title:'code',field:'code',width:80,sortable:true}

				]],

				columns:[[

			        {title:'Base Information',colspan:3},

					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,

						formatter:function(value,rec){

							return '<span style="color:red">Edit Delete</span>';

						}

					}

				],[

					{field:'name',title:'Name',width:120},

					{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},

					{field:'col4',title:'Col41',width:150,rowspan:2}

				]],

				pagination:true,

				rownumbers:true

			});

		});

	</script>

	</head>

	<body class="easyui-layout">

		<div data-options="region:'north',split:true" title="North Title"
			style="height: 100px; padding: 10px;">

			<p>
				The north content.
			</p>

		</div>

		<div data-options="region:'south',split:true" title="South Title"
			style="height: 100px; padding: 10px; background: #efefef;">

			<div class="easyui-layout" data-options="fit:true"
				style="background: #ccc;">

				<div data-options="region:'center'">
					sub center
				</div>

				<div data-options="region:'east',split:true" style="width: 200px;">
					sub center
				</div>

			</div>

		</div>

		<div data-options="region:'east',iconCls:'icon-reload',split:true"
			title="Tree Menu" style="width: 180px;">

			<ul class="easyui-tree" data-options="url:'tree_data.json'"></ul>

		</div>

		<div data-options="region:'west',split:true" title="West Menu"
			style="width: 280px; padding1: 1px; overflow: hidden;">

			<div class="easyui-accordion" data-options="fit:true,border:false">

				<div title="Title1" style="padding: 10px; overflow: auto;">

					<p>
						content1
					</p>

					<p>
						content1
					</p>

					<p>
						content1
					</p>

					<p>
						content1
					</p>

					<p>
						content1
					</p>

					<p>
						content1
					</p>

					<p>
						content1
					</p>

					<p>
						content12
					</p>

				</div>

				<div title="Title2" data-options="selected:true"
					style="padding: 10px;">

					content2

				</div>

				<div title="Title3" style="padding: 10px">

					content3

				</div>

			</div>

		</div>

		<div data-options="region:'center'" title="Main Title"
			style="overflow: hidden;">

			<div class="easyui-tabs" data-options="fit:true,border:false">

				<div title="Tab1" style="padding: 20px; overflow: hidden;">

					<div style="margin-top: 20px;">

						<h3>
							jQuery EasyUI framework help you build your web page easily.
						</h3>

						<ul>

							<li>
								easyui is a collection of user-interface plugin based on jQuery.
							</li>

							<li>
								using easyui you don't write many javascript code, instead you
								defines user-interface by writing some HTML markup.
							</li>

							<li>
								easyui is very easy but powerful.
							</li>

						</ul>

					</div>

				</div>

				<div title="Tab2" data-options="closable:true"
					style="padding: 20px;">
					This is Tab2 width close button.
				</div>

				<div title="Tab3" data-options="iconCls:'icon-reload',closable:true"
					style="overflow: hidden; padding: 5px;">

					<table id="tt2"></table>

				</div>

			</div>

		</div>

	</body>

</html>